<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/static/images/Logo_40.png" type="image/x-icon">
    <title>撰写文章</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="/static/css/new.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form id="form" class="form-new">
            <p id="hint" style="height: 30px; color: red; font-size: 12px"></p>
            <h2 class="form-new-heading">撰写新文章</h2>
            <label for="title" class="sr-only">标题</label>
            <input type="text" maxlength="50" id="title" class="form-control" placeholder="请输入文章标题" required autofocus>
            <div id="editor"></div>
            <textarea name="content" id="content" style="display: none;"></textarea>
            <div class="dropdown">
                <select name="category" id="category">
                    <option class="dropdown-item" value="1">Python基础</option>
                    <option class="dropdown-item" value="2">Web后端</option>
                    <option class="dropdown-item" value="3">数据采集</option>
                    <option class="dropdown-item" value="4">数据分析</option>
                    <option class="dropdown-item" value="5">机器学习</option>
                </select>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">发布</button>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>
    <script>
        let titleInput = document.querySelector('#title')
        let contentArea = document.querySelector('#content')
        let categorySelect = document.querySelector('#category')

        const E = window.wangEditor
        let editor = new E('#editor')
        editor.customConfig.uploadImgServer = '/upload/'
        editor.customConfig.uploadImgMaxLength = 1000
        editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
        editor.customConfig.uploadImgTimeout = 10000
        editor.customConfig.onchange = function (html) {
            $('#content').val(html)
        }
        editor.create()
        let form = document.querySelector('#form')
        form.addEventListener('submit', (evt) => {
            evt.preventDefault()
            fetch('/api/articles/', {
                method: 'POST',
                headers: {
                    "content-type": "application/json",
                    "token": localStorage.token
                },
                body: JSON.stringify({
                    "cateid": categorySelect.value,
                    "title": titleInput.value.trim(),
                    "content": contentArea.value,
                    "userid": localStorage.userid
                })
            })
            .then(resp => {
                if (resp.status == 201) {
                    alert('发布成功')
                    location.href = 'home.html'
                }
            })
        })
    </script>
</body>
</html>
